<template>
  <div>
    <el-button @click="dialogVisible = true" type="primary">添加单车</el-button>
    <el-table
        :data="bicycleList"
        border
        style="width: 100%">
      <el-table-column
          prop="bicycleNum"
          label="单车编号">
      </el-table-column>
      <el-table-column
          prop="bicycleAType.typeName"
          label="单车名称">
      </el-table-column>
      <el-table-column
          prop="bicycleBuyTime"
          label="单车购入时间">
      </el-table-column>
      <el-table-column
          prop="bicycleStatus"
          label="单车状态">
      </el-table-column>
      <el-table-column
          width="150"
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="updateBicycle(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="deBicycle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @current-change="initBicycle"
          :page-size="page.pageSize"
          :current-page.sync="page.pageCurrent"
          layout="prev, pager, next"
          :total="page.pageCount">
      </el-pagination>
    </div>

    <el-dialog
        :close-on-click-modal="false"
        title="添加单车"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <table>
          <tr>
            <td>单车编号</td>
            <td>
              <el-input type="text" v-model="bicycle.bicycleNum"></el-input>
            </td>
          </tr>
          <tr>
            <td>单车分类编号</td>
            <td>
              <el-input type="text" v-model="bicycle.bicycleType"></el-input>
            </td>
          </tr>
          <tr>
            <td>单车买入时间</td>
            <td>
              <el-input type="text" v-model="bicycle.bicycleBuyTime"></el-input>
            </td>
          </tr>
          <tr>
            <td>单车的状态</td>
            <td>
              <el-select v-model="bicycle.bicycleStatus" placeholder="请选择">
                <el-option
                    v-for="item in category"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBicycle">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
        :close-on-click-modal="false"
        title="修改单车信息"
        :visible.sync="dialogVisible2"
        width="30%">
      <div>
        <table>
          <tr>
            <td>单车类型编号</td>
            <td>
              <el-input type="text" v-model="upBicycle.bicycleNum"></el-input>
            </td>
          </tr>
          <tr>
            <td>单车的状态</td>
            <td>
              <el-select v-model="upBicycle.bicycleStatus" placeholder="请选择">
                <el-option
                    v-for="item in category"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>单车买入时间</td>
            <td>
              <el-input type="text" v-model="upBicycle.bicycleBuyTime"></el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateBicycleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    updateBicycleConfirm() {
      this.putRequest(this.$api.bicycle, this.upBicycle).then(res => {
        if (res) {
          this.initBicycle()
          this.dialogVisible2 = false
        }
      })
    },
    deBicycle(bi) {
      this.deleteRequest(this.$api.bicycle + bi.id).then(res => {
          if (res){
            this.initBicycle()
          }
      })
    },
    updateBicycle(bi) {
      this.upBicycle = JSON.parse(JSON.stringify(bi))
      this.dialogVisible2 = true
    },
    initBicycle() {
      this.getRequest(`${this.$api.bicycle}${this.page.pageCurrent}/${this.page.pageSize}`).then(res => {
        console.log(res)
        if (res) {
          this.bicycleList = res.obj.list
          this.page.pageCount = res.obj.total
        }
      })
    },
    addBicycle() {
      this.postRequest(this.$api.bicycle, this.bicycle).then(res => {
        if (res) {
          this.initBicycle()
          this.dialogVisible = false
        }
      })
    }
  },
  data() {
    return {
      category: [
        {
          value: '需要维修',
          label: '需要维修'
        }, {
          value: '维修中',
          label: '维修中'
        }, {
          value: '可骑行',
          label: '可骑行'
        }
      ],
      page: {
        pageSize: 5,
        pageCount: 0,
        pageCurrent: 1
      },
      upBicycle: {},
      bicycleList: [],
      bicycle: {
        bicycleNum: "",
        bicycleName: "",
        bicycleType: "",
        bicycleBuyTime: "",
        bicycleStatus: "",
      },
      dialogVisible2: false,
      dialogVisible: false
    }
  }, mounted() {
    this.initBicycle()
  }
}
</script>

<style scoped>

</style>